<template>
  <div class="app-container">
    <el-card shadow="always">
      <el-form :inline="true" :model="parms" class="demo-form-inline">
        <el-form-item label="姓名查询">
          <el-input
            v-model="parms.username"
            placeholder="请输入姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="年月查询">
          <el-date-picker
            v-model="monthStr"
            type="month"
            @change="changeYearAndMonth"
            placeholder="选择年月"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="SaveDate" type="primary" size="medium">查看本月日报
          </el-button>
        </el-form-item>
      </el-form>
      <!--   table表格   -->
      <!--      <el-table v-loading="loading" :data="summaryListInfo">-->
      <!--        <el-table-column label="月报姓名" align="center" prop="username"/>-->
      <!--        <el-table-column label="状态" align="center" prop="state">-->
      <!--          <template slot-scope="scope">-->
      <!--            <el-tag type="success" v-if="scope.row.state === 1">在岗</el-tag>-->
      <!--            <el-tag type="danger" v-else>请假</el-tag>-->
      <!--          </template>-->
      <!--        </el-table-column>-->
      <!--        <el-table-column-->
      <!--          label="创建时间"-->
      <!--          align="center"-->
      <!--          prop="createTime"-->
      <!--          width="180"-->
      <!--        >-->
      <!--          <template slot-scope="scope">-->
      <!--            <el-tag>{{ parseTime(scope.row.createTime) }}</el-tag>-->
      <!--          </template>-->
      <!--        </el-table-column>-->
      <!--        <el-table-column-->
      <!--          label="操作评分"-->
      <!--          align="center"-->
      <!--          class-name="small-padding fixed-width"-->
      <!--        >-->
      <!--          <template slot-scope="scope">-->
      <!--            <el-popconfirm-->
      <!--              title="是否评级为合格？"-->
      <!--              @confirm="handle(scope.row.id, 0)"-->
      <!--            >-->
      <!--              <el-button-->
      <!--                slot="reference"-->
      <!--                type="warning"-->
      <!--                size="small"-->
      <!--                :disabled="scope.row.level !== 0 && scope.row.level != null"-->
      <!--                :plain="scope.row.level !== 0"-->
      <!--              >合格-->
      <!--              </el-button>-->
      <!--            </el-popconfirm>-->
      <!--            <el-popconfirm-->
      <!--              title="是否评级为良好？"-->
      <!--              @confirm="handle(scope.row.id, 1)"-->
      <!--            >-->
      <!--              <el-button-->
      <!--                slot="reference"-->
      <!--                type="primary"-->
      <!--                size="small"-->
      <!--                :disabled="scope.row.level !== 1 && scope.row.level != null"-->
      <!--                :plain="scope.row.level !== 1"-->
      <!--              >良好-->
      <!--              </el-button>-->
      <!--            </el-popconfirm>-->
      <!--            <el-popconfirm-->
      <!--              title="是否评级为优秀？"-->
      <!--              @confirm="handle(scope.row.id, 2)"-->
      <!--            >-->
      <!--              <el-button-->
      <!--                slot="reference"-->
      <!--                type="success"-->
      <!--                size="small"-->
      <!--                :disabled="scope.row.level !== 2 && scope.row.level != null"-->
      <!--                :plain="scope.row.level !== 2"-->
      <!--              >优秀-->
      <!--              </el-button>-->
      <!--            </el-popconfirm>-->
      <!--          </template>-->
      <!--        </el-table-column>-->
      <!--        <el-table-column label="月报查看" align="center">-->
      <!--          <template slot-scope="scope">-->
      <!--            <el-button-->
      <!--              icon="el-icon-search"-->
      <!--              circle-->
      <!--              @click="dialogV(scope.row.id)"-->
      <!--            ></el-button>-->
      <!--          </template>-->
      <!--        </el-table-column>-->
      <!--      </el-table>-->


      <!--  新修改的table   -->

      <el-table
        :data="summaryListInfo"
        border
        style="width: 100%">
        <el-table-column
          fixed
          prop="createTime"
          label="填写时间"
          width="150">
          <template slot-scope="scope">
            {{ scope.row.createTime.slice(0, 10) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="username"
          label="填写姓名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="level"
          label="是否已评级"
          width="120">
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.level === null">未评级</el-tag>
            <el-tag v-else>已评级</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="briefSummary"
          label="月报内容"
          min-width="650"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作评分"
          width="180">
          <template slot-scope="scope">-->
            <el-popconfirm
              title="是否评级为合格？"
              @confirm="handle(scope.row.id, 0)"
            >
              <el-button
                slot="reference"
                type="warning"
                size="small"
                :disabled="scope.row.level !== 0 && scope.row.level != null"
                :plain="scope.row.level !== 0"
              >合格
              </el-button>
            </el-popconfirm>
            <el-popconfirm
              title="是否评级为良好？"
              @confirm="handle(scope.row.id, 1)"
            >
              <el-button
                slot="reference"
                type="primary"
                size="small"
                :disabled="scope.row.level !== 1 && scope.row.level != null"
                :plain="scope.row.level !== 1"
              >良好
              </el-button>
            </el-popconfirm>
            <el-popconfirm
              title="是否评级为优秀？"
              @confirm="handle(scope.row.id, 2)"
            >
              <el-button
                slot="reference"
                type="success"
                size="small"
                :disabled="scope.row.level !== 2 && scope.row.level != null"
                :plain="scope.row.level !== 2"
              >优秀
              </el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!--      -->
    </el-card>

    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        background
        :page-sizes="[5, 10, 20, 30]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog
      title="月报内容"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>{{ brief_Summary.briefSummary }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
        >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {savelevel} from "@/api/system/post.js";

import {getAllMonth} from "@/api/request";

export default {
  name: "Post",
  mounted() {
    // console.log(this.monthStr = new Date().getFullYear() + '-' + (new Date().getMonth() + 1))
  },
  data() {
    return {
      // 时间选择器参数
      monthStr: new Date().getFullYear() + '-' + (new Date().getMonth() + 1),
      dayStr: "",
      //查询条件
      parms: {
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1,
        day: "",
        username: "",
        pageSize: 5,
        pageNum: 1,
      },
      dialogVisible: false,
      //评级传参
      slevel: {
        id: 0,
        level: 0,
      },

      currentPage4: 1,
      total: 0,

      //数据返回
      summaryListInfo: [],
      brief_Summary: {},
      // 遮罩层
      loading: true,
    };
  },
  created() {
    this.getSummaryList();
  },
  watch: {
    'parms.username': function () {
      this.parms.pageNum = 1;
      this.getSummaryList();
    },
    'parms.year': function () {
      this.parms.pageNum = 1;
      this.getSummaryList();
    },
    'parms.month': function () {
      this.parms.pageNum = 1;
      this.getSummaryList();
    },
    'parms.day': function () {
      this.parms.pageNum = 1;
      this.getSummaryList();
    },
  },
  methods: {
    SaveDate() {
      this.$store.commit('SET_DATE', this.parms)
      console.log(this.$store.getters.year)
      console.log(this.$store.getters.month)
      this.$router.push("/system/post")
    },
    // 中国标准时间转成年月日
    toYear(timeStr) {
      return new Date(timeStr).getFullYear();
    },
    toMouth(timeStr) {
      var date = new Date(timeStr);
      var m = date.getMonth() + 1;
      return m;
    },
    toDay(timeStr) {
      var date = new Date(timeStr);
      var d = date.getDate();
      return d;
    },
    // 监听年月时间查询
    changeYearAndMonth() {
      // this.monthStr = ""
      this.dayStr = "";
      if (this.monthStr === null) {
        this.parms.year = "";
        this.parms.month = "";
        this.parms.day = "";
      } else {
        this.parms.year = this.toYear(this.monthStr);
        this.parms.month = this.toMouth(this.monthStr);
      }
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {
        });
    },
    //评级处理
    handle(val, res) {
      this.slevel.id = val;
      this.slevel.level = res;
      this.levelList();
      this.getSummaryList();
    },
    //每页展示数
    handleSizeChange(val) {
      this.parms.pageSize = val;
      this.getSummaryList();
    },
    //页面
    handleCurrentChange(val) {
      this.parms.pageNum = val;
      this.currentPage4 = val;
      this.getSummaryList();
    },
    //评级接口
    levelList() {
      this.loading = true;
      savelevel(this.slevel).then((response) => {
        this.loading = false;
        this.$message({
          message: "评级成功",
          type: "success",
        });
      });
    },
    //接口发送请求
    getSummaryList() {
      this.loading = true;
      getAllMonth(this.parms).then((response) => {
        this.summaryListInfo = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 自适应表格列宽
  },

};
</script>
<style>
div .cell, .el-form--inline {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

div .cell button {
  margin: 0 5px;
}
</style>
